<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <div class="game-container">
      <div class="board" ref="board">
        <div v-for="(row, rowIndex) in board" :key="rowIndex" class="board-row">
          <div 
            v-for="(cell, colIndex) in row" 
            :key="colIndex" 
            class="cell"
            @click="makeMove(rowIndex, colIndex)"
            :class="{
              'black': cell === 'black',
              'white': cell === 'white'
            }"
          ></div>
        </div>
      </div>
      
      <div class="status">
        <div v-if="!gameOver">
          当前玩家: <span :class="currentPlayer">{{ currentPlayer === 'black' ? '黑棋' : '白棋' }}</span>
        </div>
        <div v-else>
          游戏结束: <span :class="winner">{{ winner === 'black' ? '黑棋胜' : '白棋胜' }}</span>
        </div>
        <button @click="resetGame">重新开始</button>
      </div>
    </div>
  </div>

  <script type="module">
    import { createApp, ref } from 'vue';
    
    // 创建Vue应用
    const app = createApp({
      setup() {
        const board = ref(Array(15).fill().map(() => Array(15).fill(null)));
        const currentPlayer = ref('black');
        const gameOver = ref(false);
        const winner = ref(null);

        function makeMove(row, col) {
          if (gameOver.value || board.value[row][col] !== null) {
            return;
          }
          
          // Make the move
          board.value[row][col] = currentPlayer.value;
          
          // Check for win
          if (checkWin(row, col)) {
            gameOver.value = true;
            winner.value = currentPlayer.value;
          }
          
          // Switch player
          currentPlayer.value = currentPlayer.value === 'black' ? 'white' : 'black';
        }

        function checkWin(row, col) {
          const directions = [
            [[0, 1], [0, -1]],  // 横向
            [[1, 0], [-1, 0]], // 纵向
            [[1, 1], [-1, -1]], // 对角线
            [[-1, 1], [1, -1]]  // 另一条对角线
          ];
          
          for (const [[dx1, dy1], [dx2, dy2]] of directions) {
            let count = 1;
            
            // 检查一个方向
            let x = row + dx1;
            let y = col + dy1;
            while (x >= 0 && x < 15 && y >= 0 && y < 15 && board.value[x][y] === currentPlayer.value) {
              count++;
              x += dx1;
              y += dy1;
            }
            
            // 检查相反方向
            x = row + dx2;
            y = col + dy2;
            while (x >= 0 && x < 15 && y >= 0 && y < 15 && board.value[x][y] === currentPlayer.value) {
              count++;
              x += dx2;
              y += dy2;
            }
            
            if (count >= 5) {
              return true;
            }
          }
          
          return false;
        }

        function resetGame() {
          board.value = Array(15).fill().map(() => Array(15).fill(null));
          currentPlayer.value = 'black';
          gameOver.value = false;
          winner.value = null;
        }

        return {
          board,
          currentPlayer,
          gameOver,
          winner,
          makeMove,
          resetGame
        };
      }
    });
    
    // 挂载应用
    const vueApp = app.mount('#app');
  </script>
</body>
</html>